<!--  -->
<template>
  <section class="search">
    <HeaderTop title="搜索" />
    <div class="search_content">
      <form class="search_form" action="#">
        <input
          type="search"
          name="search"
          placeholder="请输入商家或美食名称"
          class="search_input"
        />
        <input type="submit" name="submit" class="search_submit" @click.prevent="handleSubmit" />
      </form>
    </div>
  </section>
</template>

<script>
import HeaderTop from "@/components/HeaderTop/HeaderTop.vue";
export default {
  data() {
    return {};
  },
  components: {
    HeaderTop,
  },
  methods: {
    handleSubmit(){
      console.log(11111111)
    }
  },
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixins.styl';

.search {
  width: 100%;

  .search_content {
    height: calc(100vh - 45px);
    overflow-y: hidden;

    .search_form {
      clearFix();
      margin-top: 45px;
      background-color: #fff;
      padding: 12px 8px;

      input {
        height: 35px;
        padding: 0 4px;
        border-radius: 2px;
        font-weight: bold;
        outline: none;

        &.search_input {
          float: left;
          width: 79%;
          border: 4px solid #f2f2f2;
          font-size: 14px;
          color: #333;
          background-color: #f2f2f2;
        }

        &.search_submit {
          float: right;
          width: 18%;
          border: 4px solid #ff2d4a;
          font-size: 16px;
          color: #fff;
          background-color: #ff2d4a;
        }
      }
    }
  }
}
</style>